<template>
  <main>
    <div id="noBody" v-if="!hasBody">
      <h3>空空如也~</h3>
    </div>
    <div id="concernList" v-else>
      <div class="concernUnit" v-for="(item,index) in concernList" :key="item.id">
        <div class="unitLeft">
          <img :src="item.image|setAvatar" alt="">
          <div class="msg">
            <h3>{{item.companyName||item.universityName||item.studentName}}</h3>
            <p v-if="item.companyName">
              {{item.address}}-企业
            </p>
            <p v-else-if="item.universityName">
              {{item.address}}-高校-{{item.nature}}
            </p>
            <p v-else>
              {{item.address||'未填写'}}-学生-{{item.yearNum}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import {cancelConcern, getConcernList} from "@/api/user";
import {identification} from "../../untils/identification";

export default {
name: "myConcern",
  data(){
  return{
    uid:this.$store.getters["user/getUser"].uid,
    type:this.$store.getters["user/getUser"].uType,
    hasBody:true,
    user:this.$store.getters["user/getUser"],
    concernList:[],
    concern:{
      uid:'',
      sid:'',
      cid:'',
      tid:'',
      type:'',
    }
  }
  },
  created() {
    this.getData()
  },
  methods:{
  cancelCon(item){
    this.concern.type=identification(item).type
    this.concern.tid=identification(item).uid
    if(this.type=='company'){
      this.concern.cid=this.uid
    }else if (this.type=='university'){
      this.concern.uid=this.uid
    }else {
      this.concern.sid=this.uid
    }
    cancelConcern(this.concern)
    .then(res=>{
      let {extend}=res.data
      this.$message.success(extend.msg)
      this.getData()
    })
  },
    getData(){
      getConcernList(this.user.uid,this.user.uType)
      .then(res=>{
        let {concernList}=res.data.extend
        this.hasBody=concernList.length       //判断有无关注
        this.concernList=concernList
        console.log(res)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
fontColor=rgb(109,109,109)
main
  width 70%
  min-height 300px
  background-color white
#noBody
  display flex
  justify-content center
  align-items center
  color fontColor
#concernList
  width 100%
  display flex
  flex-direction column
  align-items center
.concernUnit
  margin 10px
  width 68%
  height 80px
  display flex
  justify-content space-between
  box-sizing border-box
  padding 10px
  transition box-shadow .2s
  border 1px solid #ead5d5
  cursor pointer
  &:hover
    box-shadow 0 0 3px gray

.unitLeft
  color fontColor
  height 100%
  width 40%
  justify-content space-between
  display flex
  & *
    margin 0

.unitLeft img
  height 100%
  width 60px
  border-radius 5px
.msg
  width 60%
  display flex
  flex-direction column
  justify-content space-between

.unitRight
  width 20%
  display flex
  justify-content center
  align-items center
</style>
